<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
  子 -> 父   通过传递函数的形式实现
          :gettotal="gettotal"    v-bind   props
          @gettotal="gettotal"    this.$emit('gettotal',参数)

-->
<div id="app">
    <h1>学生的个数:{{number}}</h1>
<!--    <student :gettotal="gettotal"></student>-->
    <student @gettotal="gettotal"></student>
    <teacher></teacher>
</div>

<script src="../js/vue.js"></script>
<script>
    // 创建组件对象
    const student = {
        template: `
            <div>
                <div v-for="student in students" :key="student.name">
                    <p>学生姓名:{{student.name}}</p>
                    <p>学生年龄:{{student.age}}</p>
                    <p>学生专业:{{student.major}}</p>
                    <p>---------------------------------</p>

                </div>
                <button @click="total">统计学生的个数</button>
            </div>
        `,
        data() {
            return {
                students:[
                    {
                        name:'xiaoming',
                        age:20,
                        major:'java'

                    },
                    {
                        name:'jack',
                        age:20,
                        major:'java'
                    },
                    {
                        name:'xiaohei',
                        age:20,
                        major:'web'
                    }
                ]
            }
        },
        methods: {
            total(){ //  统计学生的个数
                console.log("========子组件中的函数 total()被调用===========")
                console.log(this.students.length)
                // 调用父组件中传递的函数
                // this.gettotal(this.students.length)
                this.$emit('gettotal',this.students.length)
            }
        },
        // props:['gettotal']
    }

    const teacher = {
        template: `
            <div>
                    <p>教师年龄:20</p>
                    <p>教师专业:java</p>
            </div>
        `
    }

    const vm = new Vue({
        el:'#app',
        data:{
            number:0
        },
        methods:{
            //  改变学生数量
            gettotal(val){
                console.log("========父组件中的函数 getTotal()被调用===========")
                this.number = val
            }
        },
        components:{
            student,teacher
        }
    })
</script>
</body>
</html>
